<template>
  <el-row style="height: 100%; background-color: #00a468">
    <el-col :span="24" style="height: 100%">
      <h3 class="mb-2">智慧资产管理系统</h3>
      <el-menu
        :collapse="isCollapse"
        active-text-color="#ffd04b"
        background-color="#00a468"
        class="el-menu-vertical-demo"
        default-active="5"
        style="border: 0"
        text-color="#fff"
        @open="handleOpen"
        router
        @close="handleClose"
      >
        <el-menu-item index="0">
          <el-icon>
            <Search />
          </el-icon>
          <input type="text" placeholder="请输入菜单名称" class="input" />
        </el-menu-item>
        <el-menu-item index="1">
          <el-icon>
            <House />
          </el-icon>
          <span>平台首页</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <ShoppingCartFull />
            </el-icon>
            <span>采购管理</span>
          </template>
          <el-menu-item index="2-1">采购申请</el-menu-item>
          <el-menu-item index="2-2">采购订单</el-menu-item>
          <el-menu-item index="2-3">采购变更</el-menu-item>
          <el-menu-item index="2-4">收货管理</el-menu-item>
          <el-menu-item index="2-5">付款申请</el-menu-item>
          <el-menu-item index="2-6">付款登记</el-menu-item>
          <el-sub-menu index="2-7">
            <template #title>分析报表</template>
            <el-menu-item index="2-7-1">采购申请报表</el-menu-item>
            <el-menu-item index="2-7-2">采购订单报表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2-8">
            <template #title>基本设置</template>
            <el-menu-item index="2-8-1">供应商管理</el-menu-item>
            <el-menu-item index="2-8-2">分类管理</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Monitor />
            </el-icon>
            <span>资产管理</span>
          </template>
          <el-menu-item index="3-1" route="/WarehousingOfAssets">资产入库</el-menu-item>
          <el-menu-item index="3-2" route="/AssetTag">资产标签</el-menu-item>
          <el-menu-item index="3-3" route="/MaintenanceReminder">维护提醒</el-menu-item>
          <el-menu-item index="3-4" route="/MaintenanceRegister">维护登记</el-menu-item>
          <el-menu-item index="3-5" route="/ReceiveAndreturn">领用归还</el-menu-item>
          <el-menu-item index="3-6" route="/AllocationOfAssets">资产调拨</el-menu-item>
          <el-menu-item index="3-7" route="/InventoryOfAssets">资产盘点</el-menu-item>
          <el-menu-item index="3-8" route="/depreciationOfAssets">资产折旧</el-menu-item>
          <el-menu-item index="3-9" route="/SaleOfAssets">资产变卖</el-menu-item>
          <el-menu-item index="3-10" route="/assetRetirement">资产报废</el-menu-item>
          <el-sub-menu index="3-11">
            <template #title>分析报表</template>
            <el-menu-item index="3-11-1">资产统计报表</el-menu-item>
            <el-menu-item index="3-11-2">资产变化报表</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Coin />
            </el-icon>
            <span>资产维护</span>
          </template>
          <el-sub-menu index="4-1">
            <template #title>维护日历</template>
            <el-menu-item index="4-1-1">维护日历</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-2">
            <template #title>设备维保</template>
            <el-menu-item index="4-1-1">维保总览</el-menu-item>
            <el-menu-item index="4-1-2">维保计划</el-menu-item>
            <el-menu-item index="4-1-2">维保任务</el-menu-item>
            <el-menu-item index="4-1-2">维保记录</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-3">
            <template #title>设备巡检</template>
            <el-menu-item index="4-1-1">巡检计划</el-menu-item>
            <el-menu-item index="4-1-2">巡检任务</el-menu-item>
            <el-menu-item index="4-1-2">巡检记录</el-menu-item>
            <el-menu-item index="4-1-2">巡检标准</el-menu-item>
            <el-menu-item index="4-1-2">巡检报表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-4">
            <template #title>设备报修</template>
            <el-menu-item index="4-1-1">报修记录</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-5">
            <template #title>设备资料</template>
            <el-menu-item index="4-1-1">设备资料</el-menu-item>
            <el-menu-item index="4-1-2">故障库</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-6">
            <template #title>人员管理</template>
            <el-menu-item index="4-1-1" route="/people">人员管理</el-menu-item>
            <el-menu-item index="4-1-2" route="/workforce">排班管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-7">
            <template #title>统计报表</template>
            <el-menu-item index="4-1-1" route="/statistical">设备类型报表</el-menu-item>
            <el-menu-item index="4-1-2" route="/equipment">设备检查报表</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="/box">
          <template #title>
            <el-icon>
              <Box />
            </el-icon>
            <span>仓库管理</span>
          </template>
          <el-menu-item index="/box/echars">库存台账</el-menu-item>
          <el-menu-item index="/box/warehousingManagement">入库管理</el-menu-item>
          <el-menu-item index="/box/deliveryManagement">出库管理</el-menu-item>
          <el-menu-item index="/box/collectMaterialsApplication">领料申请</el-menu-item>
          <el-menu-item index="/box/warehouseAllocation">仓库调拨</el-menu-item>
          <el-menu-item index="/box/labelPrinting">标签打印</el-menu-item>
          <el-menu-item index="/box/inventoryCount">库存盘点</el-menu-item>
          <el-menu-item index="/box/inventoryWarning">库存预警</el-menu-item>

          <el-sub-menu index="/box/boxBasicSet">
            <template #title>基础设置</template>
            <el-menu-item index="/box/boxBasicSet/warehouseManagement">仓库管理</el-menu-item>
            <el-menu-item index="/box/boxBasicSet/areaSet">区域设置</el-menu-item>
            <el-menu-item index="/box/boxBasicSet/materialData">物品资料</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>系统设置</span>
          </template>

          <el-menu-item index="6-1" :route="{ path: '/home/role' }">角色管理</el-menu-item>
          <el-menu-item index="6-2" :route="{ path: '/home/depart' }">部门管理</el-menu-item>
          <el-menu-item index="6-3" :route="{ path: '/home/post' }">岗位管理</el-menu-item>
          <el-menu-item index="6-4" :route="{ path: '/home/certificate' }">认证管理</el-menu-item>
          <el-menu-item index="6-5" :route="{ path: '/home/user' }">用户管理</el-menu-item>
          <el-menu-item index="6-6" :route="{ path: '/home/opera' }">操作日志</el-menu-item>
          <el-menu-item index="6-7" :route="{ path: '/home/logins' }">登录日志</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

import { ref } from 'vue'
import {
  House, //首页
  Search, //搜索
  ShoppingCartFull, //采购
  Monitor, //资产管理
  Coin, //资产维护
  Box, //仓库管理
  Setting //系统设置
} from '@element-plus/icons-vue'
const router = useRouter()
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const isCollapse = ref(false)
// const isCollapse = ref(true)
</script>
<style scoped>
:deep().mb-2 {
  margin: 0;
  height: 80px;
  width: 220px;
  border: 0;
  background-color: #00915c;
  color: white;
  font-weight: lighter;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input {
  background-color: #00a468;
  border: 0;
  width: 150px;
  outline: none;
  color: yellow;
  caret-color: white;
}

/* WebKit browsers */
input::-webkit-input-placeholder {
  color: #ccede1;
  font-size: 14px;
}

/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder {
  color: #ccede1;
  opacity: 1;
  font-size: 14px;
}

/* Mozilla Firefox 19+ */
input::-moz-placeholder {
  color: #ccede1;
  opacity: 1;
  font-size: 14px;
}

/* Internet Explorer 10+ */
input:-ms-input-placeholder {
  color: #ccede1;
  font-size: 14px;
}
</style>
